<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="1400">
    <div class="mb-8px">
      <el-button @click="submitForm" type="primary" :disabled="formLoading">保存</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
    <el-table
      ref="multipleTableRef"
      v-loading="loading"
      :data="craftData"
      @select="handleSelectionChange"
      border
      :max-height="450"
      class="table-style"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="工艺名称" align="center" prop="productName" />
      <el-table-column label="版本号" align="center" prop="version" />
      <el-table-column label="启用日期" align="center" prop="enableTime" />
      <el-table-column label="停用日期" align="center" prop="stopTime" />
      <el-table-column label="说明" align="center" prop="remark" />
      <!-- <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="copy(scope.$index)">复制</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <div class="mb-20px">
      <el-pagination
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[50, 100, 150, 200, 2500]"
        :background="true"
        class="float-right mt-5px mb-20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import * as CraftTaskBillApi from '@/api/config/craftTaskBill'
// import { formatDate } from '@/utils/formatTime'
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('复制工艺') // 弹窗的标题
const loading = ref(false) // 表单的加载中
const formLoading = ref(false) // 提交

const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 50
})
const craftData = ref([]) // 表单数据

/** 打开弹窗 */
const open = async (arr: []) => {
  console.log(arr, 'arr')
  dialogVisible.value = true
  loading.value = true
  try {
    await getList()
    nextTick(() => {
      arr.map((val) => {
        craftData.value.map((item) => {
          if (val === item['id']) {
            multipleTableRef.value!.toggleRowSelection(item, true)
          }
        })
      })
    })
  } finally {
    loading.value = false
  }
}

// 获取数据
const getList = async () => {
  loading.value = true
  try {
    const data = await CraftTaskBillApi.getCraftCoursePage(queryParams)
    total.value = data.total
    craftData.value = data.list
  } finally {
    loading.value = false
  }
}

// 选择
const checkedGh = ref()
const multipleTableRef = ref()
const handleSelectionChange = (selection, row) => {
  multipleTableRef.value.clearSelection()
  if (selection.length === 0) {
    checkedGh.value = []
    return
  }
  checkedGh.value = row
  multipleTableRef.value.toggleRowSelection(row, true)
}

/** 页面容量 */
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getList()
}
/** 页面 */
const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getList()
}

/** 提交 */
const submitForm = async () => {
  loading.value = true
  try {
    let id = checkedGh.value.id
    const data = await CraftTaskBillApi.getCraftCourseList(id)
    // 发送操作成功的事件
    emit('success', data, id)
    dialogVisible.value = false
  } finally {
    loading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
</script>

<style lang="scss" scoped>
.table-style ::v-deep .el-table-column--selection.is-leaf .el-checkbox {
  display: none;
}
</style>
